<template>
	<el-col :span="componentModel.col" @click.stop="onClickHandler()"
		style="text-align: center;width:100%;;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);position: relative;">
		<i class="el-icon-rank drag-widget" style="position: absolute;left: 0px;top:0px;z-index: 100;" v-show="selected"></i>
		<i class="el-icon-s-grid" style="position: absolute;right: 0px;top:0px;z-index: 100;"
			@click="onIconClickHandler"></i>
		<div style="margin-top: 30px;">
			{{componentModel.title}}
		</div>
		<div style="margin-top: 30px;font-size: 26px;font-weight: bold;">155</div>
		<ChartConfigDialog ref="chartConfigDialog"></ChartConfigDialog>
	</el-col>
</template>

<script>
	import utils from '@/utils/utils.js';
	import ChartConfigDialog from './ChartConfigDialog.vue';
	import formDesignerUtil from '@/utils/formDesignerUtil.js';
	export default {
		name: "DesignIndicatorTableComponent",
		components: {
			ChartConfigDialog
		},
		props: [
			"componentModel"
		],
		beforeMount() {
			if (this.componentModel.col == undefined) {
				formDesignerUtil.setComponentModelPropValue(this.componentModel,"col",3);
			}
		},
		inject: ['children'],
		mounted() {
			this.children.push(this);
		},
		beforeUnmount() {
			utils.removeArrayElement(this.children, this);
		},
		data() {
			return {
				selected: false,
				"propertySet": [{
						"key": "ID",
						"label": "ID",
						"editor": "label",
					},
					{
						"key": "dataSource",
						"label": "数据源",
						"editor": "select"
					}, {
						"key": "title",
						"label": "标题",
						"editor": "text",
					}, {
						"key": "cssStyleExpression",
						"label": "cssStyle",
						"editor": "textarea",
					},
					{
						"key": "col",
						"label": "列数",
						"editor": "text"
					}
				],
			}
		},
		methods: {
			onClickHandler() {
				formDesignerUtil.componentClickHandler(this);
			},
			setSelected(selected) {
				this.selected = selected;
			},
			getPropertyValue(propertyKey) {
				if(propertyKey=="ID"){
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"id");
				}else if(propertyKey=="col"){
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"col");
				}else if (propertyKey == "title") {
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"title");
				}else if (propertyKey == "subtitle") {
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"subtitle");
				}
				return formDesignerUtil.getComponentModelCommonValue(this.componentModel,propertyKey);
			},
			setPropertyValue(propertyKey, propertyValue) {
				formDesignerUtil.setComponentModelCommonValue(this.componentModel,propertyKey, propertyValue);
				if (propertyKey == "col") {
					formDesignerUtil.setComponentModelPropValue(this.componentModel,"col",parseInt(propertyValue));
				} else if (propertyKey == "title") {
					formDesignerUtil.setComponentModelPropValue(this.componentModel,"title",propertyValue);
				} else if (propertyKey == "subtitle") {
					formDesignerUtil.setComponentModelPropValue(this.componentModel,"subtitle",propertyValue);
				}
			},
			onIconClickHandler() {
				var dataSource = this.getPropertyValue("dataSource");
				if (dataSource == undefined || dataSource == "") {
					this.$alert("请选择数据源", "提示");
					return;
				}
				this.$refs.chartConfigDialog.setVisible(true);
				var dataSourceList = this.$store.state.formDesigner.$refs.dataSourceConfig.datasourceList;
				var tableName;
				for (var i = 0; i < dataSourceList.length; i++) {
					if (dataSourceList[i].id == dataSource) {
						tableName = dataSourceList[i].tableName;
						break;
					}
				}
				this.$refs.chartConfigDialog.init(tableName, this.componentModel);
			}
		},
	}
</script>

<style>
	
</style>
